const tbody = document.querySelector("tbody");
const showModalBtn = document.querySelector(".show-modal-btn"); // 添加按钮
const provinceDom = document.querySelector("[name=province]"); //省份
// console.log(provinceDom);
const cityDom = document.querySelector("[name=city]"); // 城市
const countyDom = document.querySelector("[name=county]"); // 县区
const btnFix = document.querySelector(".btn-fix"); // 修改
// const dialog = document.querySelector(".modal-dialog");
const addForm = document.querySelector(".add-form"); // 表单
const addModalLabel = document.querySelector("#addModalLabel"); // h5标签

function init() {
  render();
  // 渲染省份
  pri();
  // 城市
  provinceDom.addEventListener("change", function () {
    city(provinceDom.value);
  });
  // 县区
  cityDom.addEventListener("change", function () {
    county(provinceDom.value, cityDom.value);
  });
}

init();
// 渲染页面
async function render() {
  const res = await axios({
    url: "/student/list",
  });
  // console.log(res);
  const list = res.data.data;
  // console.log(list);
  const newlist = list.map((item) => {
    const {
      id,
      name,
      sex,
      age,
      group,
      phone,
      salary,
      truesalary,
      province,
      city,
      county,
    } = item;
    return `
        <tr>
        <th scope="row">${id}</th>
        <td>${name}</td>
        <td>${age}</td>
        <td>${sex}</td>
        <td>${group}</td>
        <td>${phone}</td>
        <td>${salary}</td>
        <td>${truesalary}</td>
        <td>${province + city + county}</td>
        <td>
          <button type="button" class="btn btn-primary btn-sm btn-fix " data-id='${id}'>修改</button>
          <button type="button" class="btn btn-danger btn-sm">删除</button>
        </td>
      </tr>
        `;
  });
  tbody.innerHTML = newlist.join("");
}
// 点击添加按钮 弹出模态框
showModalBtn.addEventListener("click", function (e) {
  $("#addModal").modal("show");
  addModalLabel.innerText = "录入学员信息";
});
// 省份
async function pri() {
  const privince = await axios({
    url: "/geo/province",
  });
  // console.log(privince);
  const list = privince.data;
  // console.log(list);
  const li = list.reduce((prev, item) => {
    return prev + ` <option  value="${item}">${item}</option> `;
  }, '<option selected value="">--省--</option>');
  provinceDom.innerHTML = li;
}
// 城市
async function city(pname) {
  // console.log(this.value);
  const city = await axios({
    url: "/geo/city",
    params: {
      pname,
    },
  });
  // console.log(city);
  cityDom.innerHTML = city.data.reduce((prev, item) => {
    return prev + ` <option  value="${item}">${item}</option>`;
  }, '<option selected value="">--市--</option>');
  countyDom.innerHTML = '<option value="">--县--</option>';
}
// 县区
async function county(pname, cname) {
  const county = await axios({
    url: "/geo/county",
    params: {
      pname,
      cname,
    },
  });
  // console.log(county);
  countyDom.innerHTML = county.data.reduce((prev, item) => {
    return prev + `<option  value="${item}">${item}</option> `;
  }, '<option selected value="">--县--</option>');
}
// 新增
addForm.addEventListener("submit", async function (e) {
  e.preventDefault();
  const data = serialize(addForm, { hash: true, empty: true });
  let res;
  if (addModalLabel.innerText === "录入学员信息") {
    delete data.id;
    res = await axios({
      url: "/student/add",
      method: "post",
      data: {
        ...data,
      },
    });
  } else {
    res = await axios({
      url: "/student/update",
      method: "put",
      data: {
        ...data,
      },
    });
  }
  console.log(res);
  if (res.data.code === 0) {
    toastr.success("操作成功");
    // 重置表单
    addForm.reset();
    $("#addModal").modal("hide");
    render();
  }
});

tbody.addEventListener("click", async function (e) {
  if (e.target.classList.contains("btn-fix")) {
    // console.log(122);
    // 弹出模态框
    $("#addModal").modal("show");
    // 修改标题
    addModalLabel.innerText = "编辑学员信息";
    // 获取id 值
    const id = e.target.dataset.id;
    // 获取 表单值
    /* const data = serialize(addForm, { hash: true, empty: true });
    console.log(data); */
    const fix = await axios({
      url: "/student/one",
      params: { id: id },
    });
    // console.log(fix);
    const data = fix.data.data;
    await city(provinceDom.value);
    await county(provinceDom.value, cityDom.value);
    // console.log(data);
    const inpytValue = addForm.querySelectorAll("[name]");
    console.log(inpytValue);
    // console.log(inpytValue);
    inpytValue.forEach((item) => {
      if (item.name !== "sex") {
        addForm.querySelector(`[name=${item.name}]`).value = data[item.name];
      }
      addForm.querySelector(`[name=sex][value=${item.sex}]`).checked = true;
    });
  }
});

/* {
  "id": 638,
  "name": "姚秀英",
  "sex": "男",
  "age": 27,
  "group": 6,
  "phone": "13776265513",
  "salary": 16197,
  "truesalary": 6507,
  "province": "西藏自治区",
  "city": "昌都市",
  "county": "卡若区",
  "user_id": 15,
  "jing": 97.180437,
  "wei": 31.138507
} */
